<template>
    <el-container class="container">
<!--        头部-->
        <el-header class="header">
            <div class="header-left">
                <img src="../../assets/logo.png" alt="logo"/>
                <span>电商管理后台系统</span>
            </div>
            <div class="header-right">
                <el-button class="btn" type="info" @click="logout">退出</el-button>
            </div>
        </el-header>
<!--        主体-->
        <el-container>
<!--            侧边栏-->
            <el-aside :width="collapseValue? '64px':'200px'" class="aside">
<!--                展开与隐藏-->
                <div class="toggle-btn" @click="toggleCollapse">|||</div>
<!--                菜单-->
                <el-menu
                        :uniqueOpened="true"
                        :collapse="collapseValue"
                        :collapse-transition="false"
                        :router="true"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose"
                        background-color="#333744"
                        text-color="#fff"
                        active-text-color="#409eef"
                        :default-active = "activePath"
                >
                    <!--                        default-active="2"-->
<!--                    一级菜单-->
                    <el-submenu :index="'/'+item.path" v-for="item in menuList" :key="item.id">
                        <template #title>
                            <i class="iconfont icon-sitemap"></i>
                            <span style="margin-left: 15px">{{item.authName}}</span>
                        </template>
                        <el-menu-item :index="'/'+son.path+''" v-if="item.children.length!==0"
                                      v-for="son in item.children" :key="son.id"
                        @click="saveNavState('/'+son.path)">
                            <template #title>
                                <i class="iconfont icon-items"></i>
                                <span>{{son.authName}}</span>
                            </template>
                        </el-menu-item>

                    </el-submenu>
                </el-menu>
            </el-aside>
<!--            内容区-->
            <el-main class="main">
<!--                路由占位符-->
                <router-view/>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
  export default {
    name: "Home",
    data(){
      return {
        menuList:[],//菜单栏
        collapseValue:false,//菜单栏是否折叠
        activePath:'',//激活菜单栏
      }
    },
    created() {
      this.getMenusList();
      this.activePath = sessionStorage.getItem('ActivePath')
    },
    methods:{
      //保存菜单栏的激活状态
      saveNavState(activePath){
        sessionStorage.setItem('ActivePath',activePath);
        this.activePath = activePath;
      },
      //折叠与展开
      toggleCollapse(){
        this.collapseValue = !this.collapseValue;
      },
      //获取菜单
      async getMenusList(){
        const {data:res} = await this.$http.get("/menus");
        console.log(res);
        if(res.meta.status !== 200){
          return this.$message.error(res.meta.msg);
        }else{
            this.menuList = res.data;
        }
      },
      logout(){
        sessionStorage.clear();
        this.$router.push("/login");
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

<style lang="less" scoped>
    .container{
        height: 100%;
    }
    .header{
        background-color: #2c3e50;
        .header-left{
            float: left;
            height: 100%;
            display: flex;
            align-items: center;
            img{
                width: 50px;
                height: 50px;
                padding: 5px;
                border-radius: 50%;
            }
            span{
                color:#fff;
               // margin-top: 10px;
                font:24px "楷体";
            }

        }
        .header-right{
            float: right;
            display: flex;
            height: 100%;
            align-items: center;
        }
    }
    .aside{
        background-color: #333744;
        .toggle-btn{
            cursor: pointer;
            letter-spacing: 0.2em;
            text-align: center;
            color: #fff;
        }
    }
    .main{
        background-color: #dddddd;
    }
</style>
